<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
import { uploadImgApi } from '@/apis/consult';
import { ref } from 'vue'
import type {Image}  from '@/types/consult'
import { useConsultStore } from '@/stores/consult';

// 1,病情描述数据
const illnessInfo = ref({
  illnessDesc: '', // 描述信息 接收用户输入
  illnessTime:1,
  consultFlag:1,
  pictures: [] as Image[],
})

//2,患病时间
// 思考，不根据数据动态渲染。页面中写死
// 数据渲染，修改页面，只需要修改数据即可（数据来源可以是接口）
const illnessTimes=[
{ value: 1, text: '一周内' },
  { value: 2, text: '一月内' },
  { value: 3, text: '半年内' },
  { value: 4, text: '半年以上' },
  // { value: 5, text: '一年以上' },
]

//3，是否就诊
const consultFlags=[
{ value: 1, text: '就诊过' },
{ value: 0, text: '没有就诊过' },
]


//4，图片上传
const onSelect=async (e:any)=>{
console.log(e)
const res = await uploadImgApi(e.tempFilePaths[0])
// console.log(res)
  // 把上传完毕的图片信息 添加到 图片数组中
  illnessInfo.value.pictures.push(res)
}

//5，下一步
const store=useConsultStore()
const props = defineProps<{
  type: string
  illnessType: string
  depId: string
}>()
const nextStep=()=>{
  console.log(illnessInfo.value)
  // 本地的数据 保存到 pinia 中
  store.illnessInfo = illnessInfo.value

  
  // 保存 路由中携带的信息
  store.type = props.type
  store.illnessType = props.illnessType
  store.depId = props.depId
  
  // 跳转到列表页
  // 列表页 区分是 直接进入，还是问诊进入
  // 传递路由参数
  uni.navigateTo({
    url: '/subpkg_archive/list/index?type=consult',
  })
}

// 6.数据的回填
if (store.illnessInfo.illnessDesc) {
  uni.showModal({
    title: '温馨提示',
    content: '是否恢复之前填写的病情信息',
    cancelColor: '#33383e',
    confirmColor: '#9ecfb3',
    success(success) {
      // console.log(success)
      if (success.confirm) {
        // 用仓库数据替换本地数据进行数据回填
        illnessInfo.value = store.illnessInfo
      }
    },
  })
}
</script>

<template>
  <!-- {{ illnessInfo }} -->
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message"> 请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助 </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            v-model="illnessInfo.illnessDesc"
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <!-- active 高亮 -->
          <text v-for="(item, index) in illnessTimes" :key="item.value" class="tag" :class="{ active: illnessInfo.illnessTime == item.value }" @click="illnessInfo.illnessTime = item.value">{{
            item.text
          }}</text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text v-for="item in consultFlags" :key="item.value" :class="{ active: illnessInfo.consultFlag == item.value }" @click="illnessInfo.consultFlag = item.value" class="tag">{{
            item.text
          }}</text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <!-- 
          title：标题
          limit:个数
          image-styles:自定义图片的样式
          file-extname：图片的扩展名
          auto-upload 自行上传 不用默认的上传
          @select 选择图片时触发
          v-model绑定图片数组，删除时会同步更新数据
          -->
          <uni-file-picker
          @select="onSelect"
          :auto-upload="false"
          title="上传病情相关图片 (仅医生可见)"
          v-model="illnessInfo.pictures"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view v-if="illnessInfo.illnessDesc !=''" class="next-step">
      <button @click="nextStep" class="uni-button">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>
